<template>
  <div class="trading-management-guide">
    <a-modal
      :open="visible"
      title="交易管理使用指南"
      width="800px"
      @cancel="handleClose"
      :footer="null"
    >
      <div class="guide-content">
        <div class="guide-sections">
          <section class="guide-section">
            <h3>📋 交易管理概述</h3>
            <p>交易管理系统支持资源的定价策略、交易对象管理和交易历史追踪：</p>
            <a-row :gutter="16" style="margin-top: 16px">
              <a-col :span="8">
                <a-card size="small" class="trading-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:dollar-outlined" />
                    定价策略
                  </template>
                  <p>成本价格、交易价格、订阅价格等</p>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" class="trading-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:team-outlined" />
                    交易对象
                  </template>
                  <p>合作伙伴、客户、供应商等</p>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small" class="trading-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:history-outlined" />
                    交易历史
                  </template>
                  <p>交易记录、统计分析等</p>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>⚙️ 交易配置指南</h3>

            <h4>定价策略配置</h4>
            <a-steps direction="vertical" size="small">
              <a-step
                title="设置成本价格"
                description="配置资源的基础成本和运营成本"
              />
              <a-step
                title="制定交易价格"
                description="设置标准价格和优惠价格策略"
              />
              <a-step
                title="配置订阅价格"
                description="设置月订阅和年订阅价格"
              />
              <a-step
                title="应用价格策略"
                description="将价格策略应用到具体资源"
              />
            </a-steps>

            <h4 style="margin-top: 24px">交易对象管理</h4>
            <a-descriptions :column="1" bordered size="small">
              <a-descriptions-item label="合作伙伴">
                与外部合作伙伴的交易关系管理
              </a-descriptions-item>
              <a-descriptions-item label="客户管理">
                客户信息、交易偏好、信用评级等
              </a-descriptions-item>
              <a-descriptions-item label="供应商管理">
                供应商资质、服务质量、价格等
              </a-descriptions-item>
            </a-descriptions>
          </section>

          <section class="guide-section">
            <h3>💡 最佳实践</h3>

            <a-alert
              message="价格策略"
              description="根据市场情况和成本变化及时调整价格策略"
              type="info"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="交易安全"
              description="确保交易过程的安全性和合规性"
              type="warning"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="数据分析"
              description="利用交易历史数据进行业务分析和决策支持"
              type="success"
              show-icon
            />
          </section>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  visible: boolean;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  close: [];
}>();

// 方法
const handleClose = () => {
  emit('close');
};
</script>

<style lang="less" scoped>
.trading-management-guide {
  .guide-content {
    max-height: 600px;
    overflow-y: auto;

    .guide-sections {
      .guide-section {
        margin-bottom: 32px;

        h3 {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
          padding-bottom: 8px;
          margin-bottom: 16px;
        }

        h4 {
          color: #333;
          margin-bottom: 12px;
        }

        .trading-card {
          .ant-card-head-title {
            display: flex;
            align-items: center;
            gap: 8px;
          }
        }
      }
    }
  }
}
</style>
